<template>
  <div>
    <title-tag class="title-box"
               :data="titleText"></title-tag>
    <van-notice-bar color="#FFA07A"
                    left-icon="volume-o"
                    text="万众一心！坚决打赢疫情防控阻击战！如有不适请尽快就医！北师小区急救电话：51515518" />
    <div class="main"
         v-for='(item,index) in items'
         :key="index">
      <router-link :to="{path:'/NoticeDetail',query:{item}}"
                   tag="span">
        <notice-item :data="item"
                     class="item"></notice-item>
      </router-link>
    </div>
    <div class="void-box"></div>
  </div>
</template>
<script>
import NoticeItem from '@/components/Property/NoticeItem'
import TitleTag from '@/components/Common/TitleTag.vue'
export default {
  name: 'Notice',
  data () {
    return {
      titleText: {
        head: '北师物业公告',
        foot: '看看最近小区都发现了什么?'
      },
      items: [{
        day: 21,
        month: 12,
        imgUrl: require('@/assets/images/PropertyPageImages/huaIcon.jpg'),
        text: '小区特惠 | 精致生活，从花开始',
        foot: '2020-12-21 10:14',
        right: '阅读: 113',
        longPicUrl: 'https://img.zcool.cn/community/01a3155cc664dba801214168c18616.gif'
      }, {
        day: 20,
        month: 12,
        imgUrl: require('@/assets/images/PropertyPageImages/guanzhu.jpg'),
        text: '【关注】多地通报！24岁幼师、4名搬运工感染！男子解除隔离后确诊…',
        foot: '2020-12-20 10:14',
        right: '阅读: 1389',
        longPicUrl: require('@/assets/images/PropertyPageImages/duorenganran.jpg')
      }, {
        day: 10,
        month: 12,
        imgUrl: require('@/assets/images/PropertyPageImages/shiwuIcon.jpg'),
        text: 'BNUZ 失物招领 | 发布第十六周失物信息',
        foot: '2020-12-10 10:14',
        right: '阅读: 589',
        longPicUrl: require('@/assets/images/PropertyPageImages/shiwuzhaoling.jpg')
      }, {
        day: 1,
        month: 12,
        imgUrl: require('@/assets/images/PropertyPageImages/guanzhu.jpg'),
        text: '@所有珠海人，看过来：新冠疫苗怎么打？有不良反应吗……',
        foot: '2020-12-01 10:14',
        right: '阅读: 1099',
        longPicUrl: require('@/assets/images/PropertyPageImages/yimiao.jpg')
      }, {
        day: 30,
        month: 11,
        imgUrl: require('@/assets/images/PropertyPageImages/teethIcon.jpg'),
        text: '一张图看懂孕期口腔护理',
        foot: '2020-11-01 10:14',
        right: '阅读: 239',
        longPicUrl: require('@/assets/images/PropertyPageImages/teeth.jpg')
      }, {
        day: 29,
        month: 11,
        imgUrl: require('@/assets/images/PropertyPageImages/NoticeImg2.jpg'),
        text: '北京师范大学珠海分校燕华苑2020年11月物业服务报告',
        foot: '2020-11-29 10:14',
        right: '阅读: 996',
        longPicUrl: 'https://img.zcool.cn/community/01a3155cc664dba801214168c18616.gif'
      }, {
        day: 21,
        month: 11,
        imgUrl: require('@/assets/images/PropertyPageImages/NoticeImg.jpg'),
        text: '冬至 | 小区免费发放汤圆',
        foot: '2020-11-21 10:14',
        right: '阅读: 679',
        longPicUrl: 'https://img.zcool.cn/community/01a3155cc664dba801214168c18616.gif'
      }, {
        day: 11,
        month: 11,
        imgUrl: require('@/assets/images/PropertyPageImages/NoticeImg2.jpg'),
        text: '注意，这些店铺即将入驻小区！',
        foot: '2020-11-11 10:14',
        right: '阅读: 889',
        longPicUrl: 'https://img.zcool.cn/community/01a3155cc664dba801214168c18616.gif'
      }]
    }
  },
  methods: {
  },
  components: {
    TitleTag,
    NoticeItem
  }
}
</script>
<style scoped>
span {
  cursor: pointer;
}
.item {
  margin-top: 5px;
}
.title-box {
  margin-left: 5%;
  margin-bottom: 2%;
  font-weight: bold;
}
/* 撑高用的 */
.void-box {
  height: 50px;
}
::v-deep .titletext {
  color: #4682b4;
  text-align: left;
}
::v-deep .detail[data-v-7a129906] {
  color: #778899;
  font-weight: normal;
}
/* 响应式 */
@media (min-width: 270px) and (max-width: 575.98px) {
  ::v-deep .titletext {
    font-size: 18px;
  }
  ::v-deep .detail[data-v-7a129906] {
    font-size: 14px;
  }
  .van-notice-bar {
    font-size: 12px;
    height: 30px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  ::v-deep .titletext {
    font-size: 26px;
  }
  ::v-deep .detail[data-v-7a129906] {
    font-size: 24px;
  }
  .van-notice-bar {
    font-size: 18px;
    height: 40px;
  }
}
@media (min-width: 767px) and (max-width: 991.98px) {
  ::v-deep .titletext {
    font-size: 28px;
  }
  ::v-deep .detail[data-v-7a129906] {
    font-size: 24px;
  }
  .van-notice-bar {
    font-size: 18px;
    height: 40px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  ::v-deep .titletext {
    font-size: 30px !important;
  }
  ::v-deep .detail[data-v-7a129906] {
    font-size: 28px;
  }
  .van-notice-bar {
    font-size: 18px;
    height: 40px;
  }
}
@media (min-width: 1200px) {
  ::v-deep .titletext {
    font-size: 32px !important;
  }
  ::v-deep .detail[data-v-7a129906] {
    font-size: 30px;
  }
  .van-notice-bar {
    font-size: 18px;
    height: 40px;
  }
}
</style>
